import React, {PureComponent, Fragment} from 'react';
import {connect} from 'dva';
import request from "@/utils/request";
import {Card, Button, Select, Alert, Form, Steps, Modal, message, Drawer, Badge} from 'antd';
const Option = Select.Option;

const {Step} = Steps;
const formItemLayout = {
  labelCol: {
    span: 3,
  },
  wrapperCol: {
    span: 21,
  },
};
@Form.create()
class Devices extends PureComponent {
  state = {
    data:this.props.jsonData,
    jsonStatus: 'success'
  };
  hideContent = ()=> {
  }

  componentDidMount() {
    const container = document.getElementById('jsoneditor2');
    const options = {
      mode: 'code',
      modes: ['code', 'text'], // allowed modes
      onChange: this.handleChange,
      onError: function (err) {
      },
      onModeChange: function (newMode, oldMode) {
        console.log('Mode switched from', oldMode, 'to', newMode);
      }
    };
    this.editor = new window.JSONEditor(container, options, this.state.data);
  }
  handleChange = () => {
    try {
      console.log("this.editor.get()", this.editor.get());
      this.setState({
        jsonStatus: 'success',
        data: this.editor.get()
      })
    } catch (e) {
      // HACK! This should propagate the error somehow
      // console.error(e);
      this.setState({
        jsonStatus: 'error',
      })
    }
  }
  sendData=()=>{

  }

  render() {
    const {form} = this.props;
    const {getFieldDecorator} = form;
    return (
      <div>
        {/* {this.props.retry&&
          <Button style={{marginBottom:'10px'}} onClick={() =>{
            this.props.sedData2()
          }} type={'primary'}>下发指令</Button>} */}
        <div
          id='jsoneditor2'
          ref={(ref) => {
            this.editorRef = ref;
          }}
          style={{height: '500px', width: '100%'}}
        />
      </div>
    );
  }
}

export default Devices;
